<template>
	<view>
		<view class="topbox">
			<view class="commis">{{ BonusInfo.TotalBonus || '0' }}</view>
			<view class="titlebox">
				<image class="coinimg" src=" https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720406614526516.png"></image>
				<view class="title_1">项目分红</view>
				<view class="payHuiDouNav" @click="tixbtn">
					<text lines="1" class="text_4">发布</text>
				</view>
			</view>
		</view>
		<!-- <view class="navList">
			<view class="navContent">
				<text
					lines="1"
					class="text_5"
					:class="{ navActive: navIndexValue == index }"
					@click="navIndex(index)"
					v-for="(item, index) in navMenu"
					:key="index"
				>
					{{ item }}
				</text>
			</view>
		</view> -->
		<block v-if="navIndexValue == 0">
			<view class="listbox">
				<!-- <view class="titlebox">
                <view class="leftline"></view>
                <view class="title_2">收益明细</view>
            </view> -->
				<block v-if="list.length > 0">
					<view class="content_cell" v-for="(item, index) in list" :key="index">
						<view class="content">
							<view class="leftbox">
								<view class="sill">
									{{ item.Title }}
									<!-- <text :class="item.Status==1?'green':''">{{item.Status==1 ? '成功' : '待审核'}}</text> -->
								</view>
								<view class="time">{{ getTime2(item.CreateTime) }}</view>
							</view>
							<view class="rightbox">{{ '+' + item.Bonus }}</view>
						</view>
						<view class="content_btn">
							<view class="btn_cell btn_err" @click="delBonus(item)">
								撤销
							</view>
							<view class="btn_cell" @click="nav_to(`/pages/vip/projectMPerson?id=${item.ID}`)">
								查看
							</view>
						</view>
					</view>
					
				</block>
				<block v-else>
					<view style="height: 100vh; background-color: white">
						<u-empty
							mode="list"
							width="100"
							height="100"
							icon="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720073678914285.png"
							:show="true"
							iconSize="32"
							text="暂无明细"
						></u-empty>
					</view>
				</block>
			</view>
		</block>
		<block v-if="navIndexValue == 1">
			<view class="listbox">
				<!-- <view class="titlebox">
                <view class="leftline"></view>
                <view class="title_2">提现记录</view>
            </view> -->
				<block v-if="list2.length > 0">
					<view class="content" v-for="(item, index) in list2" :key="index">
						<view class="leftbox">
							<view class="sill">
								{{ item.CommissionType }}
								<text :class="item.Status == 1 ? 'green' : ''">{{ item.Status == 1 ? '成功' : '待审核' }}</text>
							</view>
							<view class="time">{{ getTime2(item.CreateTime) }}</view>
						</view>
						<view class="rightbox">{{ '-' + item.Money }}</view>
					</view>
				</block>
				<block v-else>
					<view style="height: 100vh; background-color: white">
						<EmptyBox text="暂无记录"></EmptyBox>
					</view>
				</block>
			</view>
		</block>

		<uni-popup type="center" ref="signbox" :animation="false">
			<view class="moneybox">
				<view class="moneytext">发布分红</view>
				
				<view class="money_cell">
					<view class="money_title">
						主 题
					</view>
					<view class="money_inp">
						<input type="text" v-model="subParams.Title" placeholder="请输入主题"/>
					</view>
				</view>
				
				<view class="money_cell">
					<view class="money_title">
						分 红
					</view>
					<view class="money_inp">
						<input type="digit" v-model="subParams.Bonus" placeholder="请输入分红(元)"/>
					</view>
				</view>
				
				<view class="confimbtn" @click="Withdrawal">确认发布	</view>

			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			navIndexValue: 0,
			PageIndex: 1,
			PageSize: 10,
			userinfo: {},
			list: [],
			
			navMenu: ['收益明细', '提现记录'],
			list2: [],
			
			subParams:{
				Title: '',
				Bonus: ''
			},
			BonusInfo:null
		};
	},
	onLoad() {
		this.init()
	},
	onShow() {
		
	},
	// 触底事件
	onReachBottom() {
		if (this.isMore) {
			this.PageIndex++;
		}
	},
	methods: {
		init(){
			this.ProjectBonusList()
		},
		delBonus(item){
			uni.showModal({
				title:'提示',
				content:'是否确认操作无误？',
				success: async (rex) => {
					if (rex.confirm) {
						let res1 = await this.$api.post('/SaleChannel/CancelBonus',{
							ID:item.ID
						})
						if (res1.code == 0) {
							this.$pv.msg('撤销完成');
							this.init()
						} else {
							this.$pv.msg(res1.message);
							
						}
					}
				}
			})
		},
		async TakeBonus(){
			let res = await this.$api.post('/SaleChannel/TakeBonus',this.subParams)
			return res
		},
		async ProjectBonusList(){
			let res = await this.$api.post('/ManageShop/ProjectBonusList')
			this.BonusInfo = res.data
			this.list = this.BonusInfo.List
		},
		async UserDepositLogs() {
			let res = await this.$api.post('SaleChannel/UserDepositLogs');
			if (res.code == 0) {
				this.list2 = this.list2.concat(res.data);
				// this.list2 = [{CommissionType:'提现',Status:0,CreateTime:'2024-02-24 21:22:00',Money:'222'}]
			}
		},
		navIndex(index) {
			this.navIndexValue = index;
			this.PageIndex = 1;
			if (index == 0) {
				this.list = [];
				this.UserCommissionV2();
			} else {
				this.list2 = [];
				this.UserDepositLogs();
			}
		},
		tixbtn() {
			// this.Money = 0
			this.$refs.signbox.open();
		},
		closePopupSub(){
			this.subParams = {
				Title:'',
				Bonus:''
			}
			this.$refs.signbox.close();
		},
		async Withdrawal() {
			if(!this.subParams.Title){
				this.$pv.msg('请输入主题');
				return;
			}
			if(!this.subParams.Bonus){
				this.$pv.msg('请输入分红');
				return;
			}
			if (!Number(this.subParams.Bonus)) {
				this.$pv.msg('请输入正确的分红');
				return;
			}
			
			uni.showModal({
				title:'提示',
				content:'是否确认操作无误？',
				success: async (rex) => {
					if (rex.confirm) {
						let res1 = await this.TakeBonus()
						if (res1.code == 0) {
							this.$pv.msg('发布完成');
							this.closePopupSub()
							this.init()
						} else {
							this.$pv.msg(res1.message);
							
						}
					}
				}
			})
			
		},
		async SaleChannelDetail() {
			let res = await this.$api.post('SaleChannel/Detail');
			if (res.code == 0) {
				this.userinfo = res.data;
				// this.Money =
			} else {
				this.$u.toast(res.message);
			}
		},
		async UserCommissionV2() {
			let res = await this.$api.post('SaleChannel/UserCommissionV2', {
				PageIndex: this.PageIndex,
				PageSize: this.PageSize,
			});
			if (res.code == 0) {
				this.list = this.list.concat(res.data);
			}
			this.isMore = Array.isArray(res.data) && res.data.length >= this.PageSize;
		},
		getTime2(l) {
			let d = new Date(l);
			let timestamp = d.getTime();
			return this.$util.unixDatetime(timestamp, 'yy-ss');
		},
	},
	created() {},
};
</script>
<style lang="scss">
page {
	background-color: #f6f6f6;
}
.navList {
	background-color: rgba(255, 255, 255, 1);
	border-radius: 16rpx;
	align-self: center;
	margin-top: 24rpx;
	width: 702rpx;
	display: flex;
	flex-direction: column;
	padding: 24rpx 62rpx 8rpx 54rpx;
	margin: 0 auto;
	margin-bottom: 20rpx;
	box-sizing: border-box;
	.navContent {
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		.text_5 {
			overflow-wrap: break-word;
			color: rgba(51, 51, 51, 1);
			font-size: 32rpx;
			font-family: PingFang-SC-Bold;
			font-weight: normal;
			text-align: right;
			white-space: nowrap;
			line-height: 44rpx;
		}
		.navActive {
			font-weight: bold;
			::after {
				content: '';
				display: block;
				width: 50rpx;
				height: 10rpx;
				background: #5d8bf8;
				margin: 0 auto;
				margin-top: 15rpx;
				border-radius: 25rpx;
			}
		}
	}
}

.moneybox {
	width: 80vw;
	height: fit-content;
	padding: 32rpx;
	background-color: #fff;
	border-radius: 32rpx;
	
	.money_cell{
		margin-top: 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.money_title{
			font-size: 28rpx;
			font-weight: bold;
		}
		.money_inp{
			width: 80%;
			margin-left: 16rpx;
			height: 60rpx;
			input{
				box-sizing: border-box;
				width: 100%;
				height: 100%;
				border: 2rpx solid #e4e4e4;
				font-size: 26rpx;
				border-radius: 8rpx;
				padding: 12rpx;
			}
			.input-placeholder {
			  color: #999;
			  font-size: 26rpx;
			}
		}
	}
	
	.summoneybox {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 30rpx;

		.summoney {
			font-size: 24rpx;
			color: #999999;
			.sumconmm {
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
			}
		}
		.allbtn {
			width: 120rpx;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			border-radius: 30rpx;
			font-size: 20rpx;
			color: #fff;
			background-color: #5d8bf8;
		}
	}

	.moneytext {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		text-align: center;
	}
	.moneycontent {
		border: 2rpx solid #e4e4e4;
		width: 70%;
		height: 80rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
		border-radius: 8rpx;
		padding: 20rpx 0;
		line-height: 1;
		> input {
			font: inherit;
			display: block;
			min-height: 0 !important;
			// height: 100%;
		}
	}
	.confimbtn {
		width: 182rpx;
		min-width: 182rpx;
		height: 64rpx;
		background: #5d8bf8;
		border-radius: 32rpx;
		text-align: center;
		line-height: 64rpx;
		color: #fff;
		font-size: 28rpx;
		margin: 40rpx auto 20rpx;
	}
	.Tiptext {
		font-size: 24rpx;
		color: #fc4f45;
		text-align: center;
	}
}
.payHuiDouNav {
	background-color: #5d8bf8;
	border-radius: 36rpx;
	//   margin-top: 88rpx;
	display: flex;
	flex-direction: column;
	padding: 10rpx 40rpx;
	margin-left: auto;
	.text_4 {
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 28rpx;
		font-family: PingFang-SC-Medium;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 40rpx;
	}
}
.topbox {
	width: 702rpx;
	height: 224rpx;
	margin: 14rpx auto;
	// background-image: url('https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720406592968785.png');
	// background-size: cover;
	// background-repeat: no-repeat;
	background: #f78d4c4f;
	border-radius: 16rpx;
	overflow: hidden;
	.commis {
		margin: 32rpx 0 0 32rpx;
		font-size: 72rpx;
		font-weight: bold;
		color: #333333;
	}
	.titlebox {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 0 32rpx;
		.coinimg {
			width: 40rpx;
			height: 40rpx;
			margin-right: 8rpx;
		}
		.title_1 {
			font-size: 28rpx;
			color: #333333;
		}
	}
}
.listbox {
	background-color: #fff;
	width: 702rpx;
	margin: 0 auto;
	padding: 32rpx;
	border-radius: 16rpx;
	box-sizing: border-box;
	.titlebox {
		display: flex;
		align-items: center;
		margin-bottom: 32rpx;
		.title_2 {
			font-size: 32rpx;
			color: #333333;
			font-weight: bold;
		}
		.leftline {
			width: 6rpx;
			height: 36rpx;
			background: #5d8bf8;
			border-radius: 4rpx;
			margin-right: 8rpx;
		}
	}
	.content_cell{
		border-bottom: 1rpx solid #e4e4e4;
		padding-bottom: 14rpx;
		margin-bottom: 24rpx;
		&:last-child{
			margin-bottom: 0;
			padding-bottom: 0;
			border: 0;
		}
		.content {
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.leftbox {
				.sill {
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
					margin-bottom: 8rpx;
					display: flex;
					align-items: center;
					text {
						font-size: 24rpx;
						color: #5d8bf8;
						margin-left: 8rpx;
					}
				}
				.green {
					color: #4ccc88 !important;
				}
				.time {
					font-size: 24rpx;
					color: #999999;
				}
			}
			.rightbox {
				font-size: 28rpx;
				color: #5d8bf8;
			}
		}
		.content_btn{
			// margin-top: 12rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			.btn_cell{
				padding: 12rpx 24rpx;
				border-radius: 14rpx;
				color: white;
				font-weight: bold;
				font-size: 22rpx;
				background-color: #5d8bf8;
				&:nth-child(n+2){
					margin-left: 12rpx;
				}
			}
			.btn_err{
				background: #fc394b;
			}
			.btn_green{
				background: #0bce68;
			}
		}
	}
}
.listbox .content:last-child {
	border-bottom: 0rpx;
	padding-bottom: 0rpx;
}
</style>
